﻿<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0 minimal-ui"/>
	<meta name="apple-mobile-web-app-capable" content="yes"/>
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<title>过滤器,自定义过滤器,双向过滤器，自定义指令</title>
	<script type="text/javascript" src="js/vue.js"></script>
	<script type="text/javascript">
		<!-- 2.0的废除了自带的过滤器 需要借助lodashjs _.debounce()  之前自定义传参用空格分开 现在todubble(a,b)-->
		<!-- capitalize（首字母大写）,uppercase,lowercase,currency,orderBy(1,-1),limitBy a b (a:取几个值 b:从哪开始),filterBy,debounce  在低版本这些可以直接用，高版本做了修改-->
		<!-- 自定义过滤器用filter -->
		window.onload = function(){
			Vue.filter("todubble",function(input){
				return input < 10? "0"+ input:input
			});
			Vue.filter("change",function(input){
				var date = new Date();
				return date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()+"	"+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds()
			});
			//双向自定义过滤器
			Vue.filter("filterhtml",{
				read:function(input){ //来自模型的值在显示到视图之前进行转换 module-->view
					return input.replace(/<[^>]+>/g,"");
				},
				write:function(newVal, oldVal){  //来自视图的值（input 元素）在写回模型之前进行转换 view-->module
					return newVal;
				}
			});

			var vm=new Vue({
				el:"#box",
				data:{
					arr:['width',"ww","data","e-resize"],
					a:3,
					time:Date.now(),
					msg:"<p>这是一个段落</p>",
				},
				
			});
		}
		
	</script>
</head>
<body>
	<div id="box">
		<input type="text" v-model="w"/>
		<ul>
			<li v-for="val in arr | filterBy w">{{val}}</li>
			<br />
			<br />
			<li v-for="val in arr | orderBy 1">{{val}}</li>
			<br />
			<br />
			<!-- <li v-for="val in arr | filterBy 'w'">{{val}}</li> -->
			<li v-for="val in arr | limitBy 1  1">{{val}}</li>
		</ul>
		<p>{{a | todubble 1 2}}</p>
		<p>{{time | change}}</p>
		
		<input type="text" v-model="msg | filterhtml" />
	</div>
	
	
	
</body>
</html>